<template>
    <el-dialog id="edit-resume"
               top="5vh"
               :width="dialog.width"
               :visible="dialog.visible"
               :modal-append-to-body="false"
               :close-on-click-modal="false"
               @close="close">
        <div slot="title" class="text-center">
            <span class="font-s20 text-bold">
                <icon name="resume"></icon>
                简历 {{ resume.id }}
            </span>
        </div>
        <!-- 头像 -->
        <div class="avatar"
             :class="{
                'avatar-success': resume.basic.avatar && resume.basic.avatar_audit == 1,
                'avatar-danger': resume.basic.avatar && resume.basic.avatar_audit == 0,
             }">
            <!-- 已上传 -->
            <el-popover v-if="resume.basic.avatar"
                        title="头像"
                        width="200"
                        trigger="click">
                <div class="mt-15 text-center">
                    <a :href="resume.basic.avatar_url" target="_blank" title="查看原图">
                        <el-image fit="cover"
                                  class="avatar-round"
                                  :src="resume.basic.avatar ? resume.basic.avatar_url : ''">
                        </el-image>
                    </a>
                    <div class="mt-10 text-right">
                        <el-popconfirm title="确定设定待状态吗？"
                                       @confirm="handleAuditAvatar([resume.id], 0)">
                            <el-button slot="reference"
                                       type="danger"
                                       size="mini"
                                       :disabled="resume.basic.avatar_audit === 0">
                                <icon name="cancel-audit"></icon>
                                待审
                            </el-button>
                        </el-popconfirm>
                        <el-popconfirm title="确定审核头像吗？"
                                       @confirm="handleAuditAvatar([resume.id], 1)">
                            <el-button slot="reference"
                                       type="success"
                                       size="mini"
                                       class="ml-5"
                                       :disabled="resume.basic.avatar_audit === 1">
                                <icon name="audit"></icon>
                                审核
                            </el-button>
                        </el-popconfirm>
                    </div>
                </div>
                <!-- 占位 -->
                <div slot="reference">
                    <el-image fit="cover"
                              class="el-avatar el-avatar--round avatar-img"
                              :src="resume.basic.avatar ? resume.basic.avatar_url : ''">
                        <div slot="error">
                            <icon name="user-solid" class="icon-avatar"></icon>
                        </div>
                    </el-image>
                    <div v-if="resume.basic.avatar_audit === 0"
                         class="avatar-audit avatar-audit--not">待审核</div>
                </div>
            </el-popover>
            <!-- 未上传 -->
            <div v-else
                 class="el-avatar el-avatar--circle avatar-img">
                <div slot="error">头像</div>
            </div>
        </div>
        <!-- 操作按钮 -->
        <div class="text-center">
            <el-button-group>
                <el-button size="medium">
                    <icon name="refresh"></icon>
                    重新载入
                </el-button>
<!--                <el-button size="medium">-->
<!--                    <icon name="update"></icon>-->
<!--                    刷新-->
<!--                </el-button>-->
                <el-button size="medium">
                    <icon name="lock"></icon>
                    锁定
                </el-button>
                <el-button size="medium">
                    <icon name="send"></icon>
                    查看投递
                </el-button>
                <el-button size="medium">
                    <icon name="interview"></icon>
                    查看面试
                </el-button>
            </el-button-group>
        </div>
        <!-- 基本信息 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span  class="detail-project__mark"></span>
                        <span class="detail-project__label">基本信息</span>
                    </div>
                </div>
                <div class="el-divider__text is-right">
                    <el-button type="warning"
                               size="mini"
                               plain
                               round
                               class="detail-button__edit"
                               @click="handleEditBasic">
                        <icon name="edit"></icon>编辑
                    </el-button>
                </div>
            </div>
            <el-descriptions size="medium"
                             label-class-name="detail-label"
                             border
                             :column="2">
                <!-- 姓名 -->
                <el-descriptions-item label="姓名：" :content-style="{width: '300px'}">{{ resume.basic.name }}</el-descriptions-item>
                <!-- 出生日期 -->
                <el-descriptions-item label="出生日期：">
                    <span :class="{'text-info-light': !resume.basic.birthday}">{{ resume.basic.birthday || '无' }}</span>
                    <el-tag v-if="resume.basic.age > 0"
                            type="success"
                            size="mini"
                            class="ml-10">{{ resume.basic.age }}岁</el-tag>
                </el-descriptions-item>
                <!-- 性别 -->
                <el-descriptions-item label="性别：">
                    <span :class="{'text-info-light': !resume.basic.gender_label}">
                        {{ resume.basic.gender_label || '无' }}</span>
                </el-descriptions-item>
                <!-- 婚姻 -->
                <el-descriptions-item label="婚姻：">
                    <span :class="{'text-info-light': !resume.basic.marital_label}">
                        {{ resume.basic.marital_label || '无' }}</span>
                </el-descriptions-item>
                <!-- 身高 -->
                <el-descriptions-item label="身高：">
                    <span :class="{'text-info-light': !resume.basic.height}">
                        {{ resume.basic.height || '无' }}</span>
                </el-descriptions-item>
                <!-- 学历 -->
                <el-descriptions-item label="学历：">
                    <span :class="{'text-info-light': !resume.basic.education_label}">
                        {{ resume.basic.education_label || '无' }}</span>
                </el-descriptions-item>
                <!-- 户籍 -->
                <el-descriptions-item label="户籍：">
                    <span :class="{'text-info-light': !resume.basic.census_label}">
                        {{ resume.basic.census_label || '无' }}</span>
                </el-descriptions-item>
                <!-- 经验 -->
                <el-descriptions-item label="工作经验：">
                    <span :class="{'text-info-light': !resume.basic.work_year_label}">
                        {{ resume.basic.work_year_label || '无' }}</span>
                </el-descriptions-item>
                <!-- 居住地 -->
                <el-descriptions-item label="居住地：">
                    <span :class="{'text-info-light': !resume.basic.home_address_label}">
                        {{ resume.basic.home_address_label || '无' }}</span>
                </el-descriptions-item>
                <!-- 地址 -->
                <el-descriptions-item label="地址：">
                    <span :class="{'text-info-light': !resume.basic.address}">{{ resume.basic.address || '无' }}</span>
                </el-descriptions-item>
                <!-- 手机号码 -->
                <el-descriptions-item label="手机号码：">
                    <span :class="{'text-info-light': !resume.basic.mobile}">{{ resume.basic.mobile || '无' }}</span>
                </el-descriptions-item>
                <!-- 邮箱 -->
                <el-descriptions-item label="邮箱：">
                    <span :class="{'text-info-light': !resume.basic.email}">{{ resume.basic.email || '无' }}</span>
                </el-descriptions-item>
                <!-- QQ -->
                <el-descriptions-item label="QQ 号码：">
                    <span :class="{'text-info-light': !resume.basic.qq}">{{ resume.basic.qq || '无' }}</span>
                </el-descriptions-item>
                <!-- 默认 -->
                <el-descriptions-item label="默认简历：">
                    <el-button :type="resume.default === 1 ? 'success' : 'info'"
                               size="mini"
                               class="el-button--mini--status"
                               round>
                        {{ resume.default === 1 ? '是' : '否' }}
                    </el-button>
                </el-descriptions-item>
            </el-descriptions>
        </section>
        <!-- 自我介绍 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span  class="detail-project__mark"></span>
                        <span class="detail-project__label">自我介绍</span>
                    </div>
                </div>
                <div class="el-divider__text is-right">
                    <el-button type="warning"
                               size="mini"
                               plain
                               round
                               class="detail-button__edit"
                               @click="handleEditIntroduction">
                        <icon name="edit"></icon>编辑
                    </el-button>
                </div>
            </div>
            <div :class="{'text-info-light': !resume.basic.introduction}">{{ resume.basic.introduction || '无' }}</div>
        </section>
        <!-- 求职意向 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span  class="detail-project__mark"></span>
                        <span class="detail-project__label">求职意向</span>
                    </div>
                </div>
                <div class="el-divider__text is-right">
                    <el-button type="warning"
                               size="mini"
                               plain
                               round
                               class="detail-button__edit"
                               @click="handleEditJobIntention">
                        <icon name="edit"></icon>编辑
                    </el-button>
                </div>
            </div>
            <el-descriptions size="medium"
                             label-class-name="detail-label"
                             border
                             :column="1">
                <!-- 求职意向 -->
                <el-descriptions-item label="求职意向：">
                    <span :class="{'text-info-light': !resume.job_intention.intention_jobs}">
                        {{ resume.job_intention.intention_jobs || '无' }}</span>
                </el-descriptions-item>
                <!-- 期望薪资 -->
                <el-descriptions-item label="期望薪资：">
                    <span :class="{'text-info-light': !resume.job_intention.expected_salary_label}">
                        {{ resume.job_intention.expected_salary_label || '无' }}</span>
                    <el-tag v-show="resume.job_intention.is_expected_salary === 1"
                            type="success"
                            size="mini"
                            effect="dark"
                            class="ml-10">显示面议</el-tag>
                </el-descriptions-item>
                <!-- 求职状态 -->
                <el-descriptions-item label="求职状态：">
                    <span :class="{'text-info-light': !resume.job_intention.job_status_label}">{{ resume.job_intention.job_status_label || '无' }}</span>
                </el-descriptions-item>
                <!-- 期望职位 -->
                <el-descriptions-item label="期望职位：">
                    <div class="detail-tag">
                        <el-tag v-for="item in resume.job_intention.work_post"
                                :key="item.value"
                                class="font-s14">
                            {{ item.label }}
                        </el-tag>
                    </div>
                </el-descriptions-item>
                <!-- 工作地区 -->
                <el-descriptions-item label="工作地区：">
                    <div class="detail-tag">
                        <el-tag v-for="item in resume.job_intention.work_area"
                                :key="item.value"
                                class="font-s14">
                            {{ String(item.value).length === 8 ? item.label : item.merge_label }}
                        </el-tag>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
        </section>
        <!-- 工作经验 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span  class="detail-project__mark"></span>
                        <span class="detail-project__label">工作经验</span>
                    </div>
                </div>
                <div class="el-divider__text is-right">
                    <el-button type="primary"
                               size="mini"
                               plain
                               round
                               class="detail-button__edit"
                               @click="handleEditIntroduction">
                        <icon name="plus"></icon>添加
                    </el-button>
                </div>
            </div>
            <el-descriptions v-for="item in resume.work_exp"
                             :key="item.id"
                             :column="1"
                             border
                             class="detail-experience"
                             size="medium"
                             label-class-name="detail-label">
                <!-- 公司名称 -->
                <el-descriptions-item label="公司名称：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            {{ item.start_date }}~{{ item.end_date }}
                            <el-tag type="info" size="mini" effect="plain" class="ml-10">{{ item.company_name || '无' }}</el-tag>
                            <el-tag type="info" size="mini" effect="plain" class="ml-10">{{ item.post || '无' }}</el-tag>
                        </div>
                        <el-button-group class="detail-button__group__op">
                            <el-button size="mini" round class="detail-button__edit"><icon name="edit"></icon>编辑</el-button>
                            <el-button size="mini" round class="detail-button__edit"><icon name="del"></icon>删除</el-button>
                        </el-button-group>
                    </div>
                </el-descriptions-item>
                <!-- 工作描述 -->
                <el-descriptions-item label="工作描述：">
                    {{ item.content }}
                </el-descriptions-item>
            </el-descriptions>
        </section>
        <!-- 教育经历 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span  class="detail-project__mark"></span>
                        <span class="detail-project__label">教育经历</span>
                    </div>
                </div>
                <div class="el-divider__text is-right">
                    <el-button type="primary"
                               size="mini"
                               plain
                               round
                               class="detail-button__edit"
                               @click="handleEditIntroduction">
                        <icon name="plus"></icon>添加
                    </el-button>
                </div>
            </div>
            <el-descriptions v-for="item in resume.education_exp"
                             :key="item.id"
                             :column="1"
                             border
                             class="detail-experience"
                             size="medium"
                             label-class-name="detail-label">
                <!-- 名称 -->
                <el-descriptions-item :label="item.edu_type === 1 ? '学校名称：' : '培训机构：'">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            {{ item.start_date }}~{{ item.end_date }}
                            <el-tag type="info" size="mini" effect="plain" class="ml-10">{{ item.school || '无' }}</el-tag>
                            <el-tag v-show="item.edu_type === 1"
                                    type="info"
                                    size="mini"
                                    effect="plain"
                                    class="ml-10">{{ item.education_label || '无' }}</el-tag>
                            <el-tag type="info" size="mini" effect="plain" class="ml-10">{{ item.speciality || '无' }}</el-tag>
                        </div>
                        <el-button-group class="detail-button__group__op">
                            <el-button size="mini" round class="detail-button__edit"><icon name="edit"></icon>编辑</el-button>
                            <el-button size="mini" round class="detail-button__edit"><icon name="del"></icon>删除</el-button>
                        </el-button-group>
                    </div>
                </el-descriptions-item>
                <!-- 描述 -->
                <el-descriptions-item label="描述：">
                    {{ item.description }}
                </el-descriptions-item>
            </el-descriptions>
        </section>
        <!-- 项目经历 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span  class="detail-project__mark"></span>
                        <span class="detail-project__label">项目经历</span>
                    </div>
                </div>
                <div class="el-divider__text is-right">
                    <el-button type="primary"
                               size="mini"
                               plain
                               round
                               class="detail-button__edit"
                               @click="handleEditIntroduction">
                        <icon name="plus"></icon>添加
                    </el-button>
                </div>
            </div>
            <el-descriptions v-for="item in resume.project_exp"
                             :key="item.id"
                             :column="1"
                             border
                             class="detail-experience"
                             size="medium"
                             label-class-name="detail-label">
                <!-- 名称 -->
                <el-descriptions-item label="项目名称：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            {{ item.start_date }}~{{ item.end_date }}
                            <el-tag type="info" size="mini" effect="plain" class="ml-10">{{ item.project_name || '无' }}</el-tag>
                            <el-tag type="info" size="mini" effect="plain" class="ml-10">{{ item.post || '无' }}</el-tag>
                        </div>
                        <el-button-group class="detail-button__group__op">
                            <el-button size="mini" round class="detail-button__edit"><icon name="edit"></icon>编辑</el-button>
                            <el-button size="mini" round class="detail-button__edit"><icon name="del"></icon>删除</el-button>
                        </el-button-group>
                    </div>
                </el-descriptions-item>
                <!-- 描述 -->
                <el-descriptions-item label="项目介绍：">
                    {{ item.content }}
                </el-descriptions-item>
            </el-descriptions>
        </section>
        <!-- 语言能力 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span  class="detail-project__mark"></span>
                        <span class="detail-project__label">语言能力</span>
                    </div>
                </div>
                <div class="el-divider__text is-right">
                    <el-button type="primary"
                               size="mini"
                               plain
                               round
                               class="detail-button__edit"
                               @click="handleEditIntroduction">
                        <icon name="plus"></icon>添加
                    </el-button>
                </div>
            </div>
            <div v-show="resume.language_skill.length > 0"
                 class="detail-tag">
                <el-tag v-for="item in resume.language_skill"
                        :key="item.id"
                        type="info"
                        effect="plain"
                        class="font-s14"
                        closable>
                    {{ item.language_label }} ● {{ item.degree_label }}
                </el-tag>
            </div>
        </section>
        <!-- 技能专长 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span  class="detail-project__mark"></span>
                        <span class="detail-project__label">技能专长</span>
                    </div>
                </div>
                <div class="el-divider__text is-right">
                    <el-button type="primary"
                               size="mini"
                               plain
                               round
                               class="detail-button__edit"
                               @click="handleEditIntroduction">
                        <icon name="plus"></icon>添加
                    </el-button>
                </div>
            </div>
            <div v-show="resume.skill.length > 0"
                 class="detail-tag">
                <el-tag v-for="item in resume.skill"
                        :key="item.id"
                        type="info"
                        effect="plain"
                        class="font-s14"
                        closable>
                    {{ item.skillname }} ● {{ item.degree_label }}
                </el-tag>
            </div>
        </section>
        <!-- 证书 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span  class="detail-project__mark"></span>
                        <span class="detail-project__label">证书</span>
                    </div>
                </div>
                <div class="el-divider__text is-right">
                    <el-button type="primary"
                               size="mini"
                               plain
                               round
                               class="detail-button__edit"
                               @click="handleEditIntroduction">
                        <icon name="plus"></icon>添加
                    </el-button>
                </div>
            </div>
            <div v-show="resume.certificate.length > 0"
                 class="detail-tag">
                <el-tag v-for="item in resume.certificate"
                        :key="item.id"
                        type="info"
                        effect="plain"
                        class="font-s14"
                        closable>
                    {{ item.certificate_name }} ● {{ item.get_date }}年获得
                </el-tag>
            </div>
        </section>
        <!-- 我的作品 -->
        <section>
            <el-divider content-position="left">
                <div class="detail-project">
                    <span  class="detail-project__mark"></span>
                    <span class="detail-project__label">我的作品</span>
                </div>
            </el-divider>
            <el-row v-show="resume.works.length > 0"
                    v-for="(children, index) in resume.works"
                    :key="index"
                    :gutter="20">
                <el-col v-for="item in children"
                        :key="item.id"
                        :span="6">
                    <el-card :body-style="{padding: '0px'}"
                             class="detail-works__card"
                             shadow="hover">
                        <!--走马灯-->
                        <el-carousel v-if="item.works_img.length > 0"
                                     height="200px"
                                     class="detail-works__carousel"
                                     indicator-position="none">
                            <el-carousel-item v-for="att in item.works_img"
                                              :key="att.works_image_url">
                                <el-image v-if="att.is_image"
                                          :src="att.works_image_url"
                                          class="detail-works__card__image"
                                          fit="contain">
                                    <div slot="error"
                                         class="detail-works__card__image__slot">
                                        <icon name="picture" class="mr-5"></icon>加载失败
                                    </div>
                                </el-image>
                                <div v-else
                                     class="detail-works__card__image__slot">
                                    <el-link type="primary">
                                        <strong class="font-s20"><span class="text-uppercase">{{ att.extension }}</span>文件</strong>
                                    </el-link>
                                </div>
                            </el-carousel-item>
                            <!-- 附件 -->
                            <div class="detail-works__attachment">
                                <icon name="attachment"></icon>{{ item.works_img.length }}
                            </div>
                        </el-carousel>
                        <!-- 无附件 -->
                        <div v-else
                             style="height: 200px;">
                            <div class="detail-works__card__image__slot">
                                <strong>无附件</strong>
                            </div>
                        </div>
                        <!-- 描述 -->
                        <div class="detail-works__card__description">
                            <div class="text-hide"><strong>{{ item.works_name }}</strong></div>
                            <div class="detail-works__card__description__content">{{ item.description }}</div>
                            <div class="mt-10 text-right">
                                <el-button-group>
                                    <el-button size="mini" class="detail-button__edit" round>
                                        <icon name="edit"></icon>编辑
                                    </el-button>
                                    <el-button size="mini" class="detail-button__edit" round>
                                        <icon name="del"></icon>删除
                                    </el-button>
                                </el-button-group>
                            </div>
                        </div>

                    </el-card>
                </el-col>
            </el-row>
        </section>
        <!-- 其它信息 -->
        <section>
            <el-divider content-position="left">
                <div class="detail-project">
                    <span  class="detail-project__mark"></span>
                    <span class="detail-project__label">其它信息</span>
                </div>
            </el-divider>
            <div v-show="resume.other.length > 0"  class="detail-tag">
                <el-tag v-for="item in resume.other"
                        :key="item.id"
                        type="info"
                        effect="plain"
                        class="font-s14"
                        closable>
                    {{ item.title }} ● {{ item.content }}
                </el-tag>
            </div>
        </section>
        <!-- from dialog -->
        <component :is="dialogBox.component" :dialog="dialogBox" @close="closeDialogBox"></component>
    </el-dialog>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { Prop, Emit } from 'vue-property-decorator'
import { namespace } from 'vuex-class'

import DialogBoxMixin from '@/mixins/dialog'
import functionMixin from '@/mixins/function'
import resumeOptionsMixin from '@/mixins/options'

import { toJson, loading, errorMessage, successMessage } from '@/utils'

const module = namespace('cms/resume')

import EditBasic from '@/views/cms/personal/resume/EditBasic.vue'
import EditJobIntention from '@/views/cms/personal/resume/EditJobIntention.vue'
import EditIntroduction from '@/views/cms/personal/resume/EditIntroduction.vue'

@Component({
  components: {
    EditBasic,
    EditJobIntention,
    EditIntroduction
  }
})
export default class Detail extends mixins(DialogBoxMixin, functionMixin, resumeOptionsMixin) {
  @Prop({ type: Object, default: { width: '1000px', visible: false } }) dialog!: any

  // Vuex
  @module.State resume!: any
  @module.Action update!: (payLoad: any) => Promise<any>

  private edit: any = {
    basic: false,
    intention: false,
    introduce: false
  }

  // form 模型
  public model: any = {}

  private saveLoading: boolean = false

  /*----- 钩子 -----*/
  created() {
    this.model = toJson(this.resume)
  }

  /**
   * 编辑基本信息
   *
   * @return {void}
   */
  private handleEditBasic(): void {
    this.dialogBox.width = '800px'
    this.dialogBox.component = 'edit-basic'
    this.$nextTick(() => {
      this.dialogBox.visible = true
      this.dialogBox.index = this.dialog.index
    })
  }

  /**
   * 编辑基本信息
   *
   * @return {void}
   */
  private handleEditJobIntention(): void {
    this.dialogBox.width = '800px'
    this.dialogBox.component = 'edit-job-intention'
    this.$nextTick(() => {
      this.dialogBox.visible = true
      this.dialogBox.index = this.dialog.index
    })
  }

  /**
   * 编辑基本信息
   *
   * @return {void}
   */
  private handleEditIntroduction(): void {
    this.dialogBox.width = '800px'
    this.dialogBox.component = 'edit-introduction'
    this.$nextTick(() => {
      this.dialogBox.visible = true
      this.dialogBox.index = this.dialog.index
    })
  }

  /**
   * 提交表单
   */
  private submitForm(): void | boolean {
    this.saveLoading = true
    this.update({ id: this.resume.id, index: this.dialog.index, params: this.model }).then((res: any) => {
      this.saveLoading = false
      if (res.status !== 200) {
        errorMessage(res.message)
        return false
      }

      this.model = toJson(res.data.show) // 重新赋给 model
      successMessage(res.message)
      this.close()
    }).catch((err: any) => {
      this.saveLoading = false
    })
  }

  @Emit()
  close(): void {}
}
</script>

<style lang="scss" scoped>
@import '~@/styles/element/element-variables';
::v-deep {
    .el {
        &-divider {
            &--horizontal {
                margin: 35px 0;
            }
        }

        &-date {
            &-editor {
                &.el-input {
                    width: 100% !important;;
                }
            }
        }

        &-select,
        &-cascader {
            width: 100% !important;
        }

        &-button--mini--status {
            padding: 4px 10px;
        }
    }

    // 详情
    .detail {
        // 分割线
        &-project {
            display: flex;
            align-items: center;

            &__mark {
                flex: 1;
                margin-right: 6px;
                width: 5px;
                height: 20px;
                background-color: $--color-primary;
                border-radius: 5px;
            }

            &__label {
                color: $--color-primary;
                font-size: 18px;
            }
        }

        &-button {
            &__edit {
                padding: 3px 10px;
                //font-weight: normal;
            }
            &__group__op {
                display: none;
                opacity: .6;
                &:hover {
                    opacity: 1;
                }
            }
        }

        &-label {
            width: 100px !important;
            text-align: right;
        }

        &-intro {}

        //
        &-tag {
            margin-top: -10px;
            .el-tag {
                margin: 10px 10px 0 0;
                //height: 28px;
                //font-size: 14px;
                //line-height: 26px;
                &:last-child {
                    margin-right: 0;
                }
            }
        }

        // 经验
        &-experience {
            margin-top: 15px;
            &:first-child {
                margin-top: 0;
            }
            &:hover {
                .detail-button__group__op {
                    display: block;
                }
            }
        }

        // 作品
        &-works {
            &__attachment {
                position: absolute;
                right: 5px;
                bottom: 5px;
                padding: 5px;
                color: #fff;
                font-weight: bold;
                line-height: 1;
                background-color: rgba(#000, .5);
                border-radius: 4px;
                z-index: 99;
                .r-icon {
                    margin-right: 5px;
                }
            }
            &__carousel {
                background-color: #f5f7fa;
            }
            &__card {
                margin-top: 20px;
                min-height: 300px;
                &__image {
                    width: 100%;
                    height: 200px;
                    &__slot {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        height: 100%;
                        font-size: 20px;
                        background-color: #f5f7fa;
                        color: #909399;
                    }
                }
                &__description {
                    border-top: 1px solid #EBEEF5;
                    padding: 10px;
                    &__content {
                        display: -webkit-box;
                        margin-top: 10px;
                        height: 42px;
                        color: $--color-info;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }
                }
            }

        }
    }
}


// 头像
.avatar {
    position: absolute;
    top: 210px;
    right: 50px;
    overflow: hidden;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #fff;
    cursor: pointer;
    &-danger {
        box-shadow: 0 0 0 4px $--color-danger;
    }
    &-success {
        box-shadow: 0 0 0 4px $--color-success;
    }

    &-img {
        position: relative;
        width: 100px;
        height: 100px;
        line-height: 100px;

        .icon-avatar {
            font-size: 60px;
        }
    }

    // 审核状态
    &-audit {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        //border-radius: 50%;

        &--not {
            color: rgba(#fff, .5);
            font-size: 28px;
            font-weight: bold;
            line-height: 100px;
            text-align: center;
            background-color: rgba($--color-danger, .7);
        }
    }

    &-round {
        //border: 2px solid #fff;
        border-radius: $--border-radius-base;
        box-shadow: 0 0 10px rgba(#000, .2);
    }
}
</style>
